<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pea tips社区</title>
<link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/wall_main.css" />
 <link rel="stylesheet" href="/networkforum/css/farbtastic.css" type="text/css" />
 <script type="text/javascript" src="/networkforum/js/Calendar3.js"></script>
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
var f;
var wallOption = {
	'wallName':{
		'param':{'id':""},
	},
	'pictureSrc':{
		'param':{'id':""},
	},
	'wallContent':{
		'param':{'id':""},
	}
}
window.onload = function(){	
	loadDate(0,20,[]);
	f = $.farbtastic("#picker");
}
function loadDate(index,size,option){
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/wall/get_wall.do?index="+index+"&size="+size+"&option="+option,function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		//page.view.clear("ulInner",false);
		//page.view("wallMain",data,pictureOption);
		pageView(data);
		page.drag();
	});
	myajax = null;	
}
function searchWall(){
	var wallName = document.getElementById("sName").value;
	var time = document.getElementById("control_date").value;
	var option = [];
	option.push(encodeURIComponent(wallName));
	option.push(time=="时间"?"":time);
	
	loadDate(0,20,option);
}
function pageView(data){
	var wallMain = document.getElementById("wallMain");
	var header = wallMain.children[0];
	var wallInner = document.getElementById("wallInner");
	if(data.length==0){
		wallMain.innerHTML = "";
		wallMain.appendChild(header);
		wallMain.appendChild(wallInner);
		var notice = document.createElement("h2");
		notice.innerHTML = "未搜索到相关信息";
		with(notice.style){
			marginTop = "100px";
			color = "grey";
			fontSize = "36px";
		}		
		wallMain.appendChild(notice);
		return;
	}
	//var module = wallMain.children[1];
	
	var frag = document.createDocumentFragment();
	for(var i =0;i<data.length;i++){
		var d = data[i];
		var fishWall = wallInner.cloneNode(true);
		
		fishWall.children[0].innerHTML = d.wallName;
		//fishWall.children[1].src = d.pictureSrc;
		reloadPicture(fishWall.children[1],d.pictureSrc);
		fishWall.children[2].innerHTML = d.wallContent;

		//样式绑定
		with(fishWall.style){
			display = "";
			maxWidth = d.wallWidth +"px";
			left = d.wallLeft +"px";
			top = d.wallTop +"px";
			boxShadow = "0px 2px 15px "+d.frameColor;
			transform="rotate("+d.wallRotate+"deg)";
			oTransform="rotate("+d.wallRotate+"deg)";
			webkitTransform="rotate("+d.wallRotate+"deg)";
			mozTransform="rotate("+d.wallRotate+"deg)";

			/*-o-transform: rotate(40deg);  Opera浏览器 */
		    /*-webkit-transform: rotate(40deg);  Webkit内核浏览器 */
		    /*-moz-transform: rotate(40deg);  Firefox浏览器 */
		}
		with(fishWall.children[1].style){
			boxShadow = "0px 2px 15px "+d.pictureColor;
		}
		
		frag.appendChild(fishWall);
	}
	wallMain.innerHTML = "";
	wallMain.appendChild(header);
	wallMain.appendChild(wallInner);
	wallMain.appendChild(frag);
}
var rota = 0;
var size = 0;
function rotate(num){
	rota = rota + num;
	var target = document.getElementById("wallInnerFish");
	with(target.style){
		//transform:rotate(-15deg);
		transform="rotate("+rota+"deg)";
		oTransform="rotate("+rota+"deg)";
		webkitTransform="rotate("+rota+"deg)";
		mozTransform="rotate("+rota+"deg)";
	}
}
function sizeHandle(num){
	var target = document.getElementById("wallInnerFish");
	var w = target.offsetWidth;
	if(w>=400&&num>0||w<=50&&num<0){
		return;
	}
	var ww = w + num;
	target.style.maxWidth = w + num +"px";
	//target.style.maxWidth = "100px";
}
function cw(){
	var target = document.getElementById("wallInnerFish");
	target.id = "";
	var l = target.offsetLeft;
	var t = target.offsetTop;
	var mw = target.offsetWidth;
	var fc = document.getElementById("frameColor");
	var pc = document.getElementById("pictureColor");
	var ps = document.getElementById("pictureSrc");
	var n = document.getElementById("wallName");
	var note = document.getElementById("notes");
	var r = rota;
	var data = new Array();
	data.push({'name':"left",'value':l});
	data.push({'name':"top",'value':t});
	data.push({'name':"width",'value':mw});
	data.push({'name':"frameColor",'value':fc.value});
	data.push({'name':"pictureColor",'value':pc.value});
	data.push({'name':"wallName",'value':n.value});
	data.push({'name':"pictureRotate",'value':r});
	data.push({'name':"wallContent",'value':note.value});
	data.push({'name':"pictureSrc",'value':ps.value});
	
	
	var myajax = getByAjax();
	myajax.init(data,"get",true);
	myajax.get("/networkforum/wall/create_wall.do",function(d){
		//var data = eval("("+d+")");
		//page.view.clear("ulInner",false);
		//page.view("ulInner",data,pictureOption);
		alert("创建成功!");
		var cs = document.getElementById("createSection");
		cs.style.height = "240px";
		cs.style.width = "0px";
		fc.value = "";
		pc.value = "";
		ps.value = "";
		n.value = "";
		note.value = "";
	});
	myajax = null;
}
function showWall(){
	var wall = document.getElementById("wallInner");
	var wallCont = document.getElementById("wallMain");
	var wallName = document.getElementById("wallName");
	var pictureSrc = document.getElementById("pictureSrc");
	//var color = document.getElementById("color");
	var notes = document.getElementById("notes");

	var fishWall = wall.cloneNode(true);
	fishWall.children[0].innerHTML = wallName.value;
	//fishWall.style.boxShadow = "0px 2px 15px "+color.value;
	var img = fishWall.children[1];
	img.src = pictureSrc.value;
	fishWall.children[2].innerHTML = notes.value;
	fishWall.id = "wallInnerFish";
	fishWall.style.display = "";
	wallCont.appendChild(fishWall);
	page.drag();

	document.getElementById("createSection").style.height = "400px";
}
function reloadPicture(img,url){
	if(url==null){
		return;
	}
	var path = url.substring(0,url.lastIndexOf("."))
	if(url.indexOf(".jpg")>0){
		img.src = path+".png";
	}
	else{
		img.src = path+".jpg";
	}
	img.image = url;
	img.onload = function(event){
		event = event||window.event;
		var target = event.target;
		target.src = target.image;
		target.onload = null;
		target = null;
	};
}
</script>
</head>
<body>
	<iframe id="tnav" class="tnav" src="/networkforum/pages/user/user_header.html"></iframe>
	<section class="wallMain" id="wallMain">
		<header class="wallHeader">
			<span>Pea tips 社园</span>
			<span>笑脸墙</span>
		</haeader>
		
		<section class="wallInner e3" id="wallInner" name="drag_node" style="display:none";>
			<h2>xunxun</h2>
			<img src="/networkforum/pages/garden/images/heart3.jpg"/>
			<span>出来匝道大家让路</span>
		</section>
	</section>
	<div style="clear: both;"></div>
	<section class="select" id="select">
		<h2>快速查找</h2>
		<section class="sInner">
			名称：<input id="sName" type="text" value=""/>
			<input name="control_date" id="control_date" type="text" value="时间" readonly="true" onclick="new Calendar().show(this);" />
			<span onclick="searchWall();">搜索</span>
		</section>
	</section>
	<secton id="createSection">
		<h2>创建笑脸</h2>
		<ul class="culInner">
			<li>
				名称：<input id="wallName" type="text" />
			</li>
			<li>
				图片：<input id="pictureSrc" onclick="pictureGroup();" type="text" readonly="true" value="点击选择..."/>
			</li>
			<li>
				备注：<textarea id="notes"></textarea>
			</li>
		</ul>
		<span id="create2" onclick="showWall();">预览</span>
		<ul class="culInner culInner2">
			<li>
				框体边色：<input id="frameColor" type="text" value="#fff" onclick="picker(event);" onblur="rPicker(event,'frame')" readonly="readonly"/>
			</li>
			<li>
				图片边色：<input id="pictureColor" type="text" value="#fff" onclick="picker(event);" onblur="rPicker(event,'picture')" readonly="readonly"/>
			</li>
			<li>
				<span id="tleft" onclick="rotate(-1);">向左倾</span>
				<span onclick="rotate(1);">向右倾</span>
				<span onclick="sizeHandle(5);">放大</span>
				<span onclick="sizeHandle(-20);">缩小</span>
			</li>
		</ul>
		<div style="clear:both;"></div>
		<label id="create" onmousedown="cw();">创建</label>
	</secton>
	<div id="picker" style="display:none;">
	</div>
	<div id="pictureHandle" style="display: none">
		<h2>选择图片</h2>
		<div class= "pictureInner">
			相册：<input type="text" id="gn" onclick="showGroups();"/>
			<span id="cancle" onclick="cancle();">取消</span>
			<ul style="display:none" id="groupList">
				<li><span id="groupName"></span></li>
			</ul>
			<div style="clear:both;"></div>
			<ul class="ulInner" id="ulInner">
				<li style="display:none;">
					<img id="picture" src="/networkforum/images/left1.jpg" />
				</li>
			</ul>
			<label id="OK" onclick="pictureOk();">确定</label>
		</div>
	</div>
    <iframe class="footer" src="/networkforum/pages/footer.html"></iframe>
</body>
<script type="text/javascript" src="/networkforum/js/drag.js"></script>

<script type="text/javascript" src="/networkforum/js/wall_main.js"></script>
<script type="text/javascript" src="/networkforum/js/jquery.js"></script>
<script type="text/javascript" src="/networkforum/js/farbtastic.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
<script type="text/javascript" src="/networkforum/js/view.js"></script>
<script type="text/javascript" src="/networkforum/js/combo.js"></script>
</html>
